<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>amis admin</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" title="default" href="https://unpkg.com/amis@6.10.0/sdk/sdk.css" />
    <link rel="stylesheet" href="https://unpkg.com/amis@6.10.0/sdk/helper.css" />
    <link rel="stylesheet" href="https://unpkg.com/amis@6.10.0/sdk/iconfont.css" />
    <script src="https://unpkg.com/amis@6.10.0/sdk/sdk.js"></script>
    <script src="https://unpkg.com/vue@2"></script>
    <script src="https://unpkg.com/history@4.10.1
/umd/history.js"></script>
    <style>
        /* 还原字体样式 */
        body {
            font-family: '微软雅黑', sans-serif;
        }

        /* 登录框左侧内容样式 */
        .login-left {
            width: 28.7%;
            height: 100%;
            background: #466cff;

            .logo {
                width: 100%;
                padding-top: 15px;
                padding-left: 35px;
                margin-bottom: 8vh;

                img {
                    width: 116px;
                    height: 42px;
                }
            }

            .login-label {
                font-size: 18px;
                color: #333;
                margin-bottom: 15px;
            }

            .login-label-x {
                font-size: 14px;
                color: #666;
            }

            /* 输入框样式 */
            .input-field {
                width: 100%;
                margin-bottom: 10px;
                padding: 10px;
                border: 1px solid #ccc;
                border-radius: 4px;
            }

            /* 二维码样式 */
            .qr-code {
                width: 100%;
                height: auto;
                display: block;
                margin-top: 20px;
            }

            /* 提交按钮样式 */
            .submit-btn {
                width: 100%;
                padding: 10px;
                background-color: #1e90ff;
                color: #fff;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }

            .submit-btn:hover {
                background-color: #1c86e0;
            }
    </style>
</head>

<body>
    <div id="root" class="app-wrapper"></div>
    <script type="text/javascript">
        (function () {
            let amis = amisRequire('amis/embed');
            const match = amisRequire('path-to-regexp').match;
            // 通过替换下面这个配置来生成不同页面
            let amisJSON =
            {
                "type": "page",
                "title": "登录",
                "body": {
                    "type": "container",
                    "body": [
                        {
                            "type": "grid",
                            "columns": [
                                {
                                    "type": "tpl",
                                    "tpl": "<div class='login-left'>" +
                                        "<div class='logo'></div>" +
                                        "<div class='login-label'>Welcome</div>" +
                                        "<div class='transverse'></div>" +
                                        "<div class='login-label' style='margin-bottom: 10px;'>欢迎进入码灵</div>" +
                                        "<div class='login-label'>管理后台</div>" +
                                        "<div class='transverse'></div>" +
                                        "<div class='login-label-x'>Welcome to CodeSpirit</div>" +
                                        "<div class='login-label-x'>management background</div>" +
                                        "<div class='carousel'>" +
                                        "<div class='carousel-img'><img src='/public/lb1.png' alt='' /></div>" +
                                        "</div></div>",
                                    "width": 6
                                },
                                {
                                    "type": "form",
                                    "title":"",
                                    "api": "/api/login",
                                    "body": [
                                        {
                                            "type": "tabs",
                                            "tabs": [
                                                {
                                                    "title": "密码登录",
                                                    "body": [
                                                        {
                                                            "type": "input-text",
                                                            "label": "用户",
                                                            "name": "loginName",
                                                            "placeholder": "手机号码",
                                                            "required": true,
                                                            "className": "input-field"
                                                        },
                                                        {
                                                            "type": "input-password",
                                                            "label": "密码",
                                                            "name": "password",
                                                            "placeholder": "请输入密码",
                                                            "required": true,
                                                            "className": "input-field"
                                                        }
                                                    ]
                                                },
                                                {
                                                    "title": "短信登录",
                                                    "body": [
                                                        {
                                                            "type": "input-text",
                                                            "label": "用户",
                                                            "name": "loginName",
                                                            "placeholder": "手机号码",
                                                            "required": true,
                                                            "className": "input-field"
                                                        },
                                                        {
                                                            "type": "input-text",
                                                            "label": "验证码",
                                                            "name": "code",
                                                            "placeholder": "请输入验证码",
                                                            "required": true,
                                                            "className": "input-field"
                                                        }
                                                    ]
                                                },
                                                {
                                                    "title": "扫码登录",
                                                    "body": [
                                                        {
                                                            "type": "qrcode",
                                                            "value": "二维码信息",
                                                            "label": "请使用App扫码登录",
                                                            "className": "qr-code"
                                                        }
                                                    ]
                                                }
                                            ]
                                        },
                                        {
                                            "type": "button",
                                            "label": "登录",
                                            "level": "primary",
                                            "actionType": "submit",
                                            "className": "submit-btn"
                                        }
                                    ],
                                    "width": 6
                                }
                            ]
                        }
                    ]
                }
            }
                ;
            let amisScoped = amis.embed('#root', amisJSON);
        })();
    </script>
</body>

</html>